<template>
  <div class='u-collectionDialog'>
    <el-dialog title="收款详情" :visible.sync="dialogVisible" :before-close="close">
      <div class="u-collectionDialog_top">
        <ul class='list'>
          <li class="item"><div class="key">提交金额：</div><span>{{ otherData.amount }}</span></li>
          <li class="item"><div class="key">审核状态：</div><span class='value'>{{ otherData.statusDesc }}</span></li>
          <li class="item"><div class="key">提交人：</div><span class='value'>{{ otherData.payer_name }}</span></li>
          <li class="item"><div class="key">提交日期：</div><span class='value'>{{ otherData.pay_time }}</span></li>
          <li class="item"><div class="key">审核人：</div><span class='value'>{{ otherData.confirmer_name }}</span></li>
          <li class="item"><div class="key">审核日期：</div><span class='value'>{{ otherData.confirm_time }}</span></li>
        </ul>
      </div>
      <el-table ref='singleTable' class="table" :data="data" border @current-change='handleCurrentChange' style='width: 100%' highlight-current-row>
        <el-table-column align='center' label='电话'>
          <template slot-scope='scope'>
            {{ scope.row.buyer_phone }}
          </template>
        </el-table-column>
        <el-table-column align='center' label='姓名'>
          <template slot-scope='scope'>
            {{ scope.row.buyer_name }}
          </template>
        </el-table-column>
        <el-table-column align='center' label='课程'>
          <template slot-scope='scope'>
            {{ scope.row.product_name }}
          </template>
        </el-table-column>
        <el-table-column align='center' label='收费'>
          <template slot-scope='scope'>
            {{ scope.row.amount }}
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class='u-pagination'>
        <pagination ref='page' @change='getData' :action='fetchData' :pageSize='10'></pagination>
      </div> -->
      <div class='u-collectionDialog-btn'>
        <el-button type='primary' @click='audit' :disabled="otherData.status !== '1'">审核</el-button>
        <el-button type='primary' @click='close'>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'u-collectionDialog',

  props: ['id', 'status'],

  data() {
    return {
      data: [],
      currentRow: '',
      dialogVisible: false,
      a: 1,
      otherData: {}
    }
  },

  methods: {
    async fetchData() {
      const { code, data } = await this.$api.orderGetPaymentInfo({
        aPayId: this.id
      })
      if (code === 0) {
        this.data = data.list
        this.otherData = {
          ...data,
          list: [],
          confirm_time: data.confirm_time === '0' ? '暂无' : window.$tools.formatDate(new Date(parseInt(data.confirm_time + '000', 10))),
          pay_time: window.$tools.formatDate(new Date(parseInt(data.pay_time + '000', 10))),
          // status: window.$tools.filterPayStatus(data.status)
          statusDesc: data.status === '1' ? '待审核' : '已审核'
        }
      }
    },

    getData(data) {
      this.data = data
    },

    handleCurrentChange(val) {
      this.currentRow = val
    },

    update() {
    },

    close() {
      this.dialogVisible = false
    },

    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        // this.$refs.page.changePage()
        this.fetchData()
      })
    },

    async audit() {
      if (this.ifRequesting) return false
      this.ifRequesting = true
      const { code } = await this.$api.orderConfirmPayment({ aPayId: this.id })
      this.ifRequesting = false
      if (code === 0) {
        this.$emit('update')
        this.dialogVisible = false
        this.__notify('提示', '审核成功')
      }
    }
  }
}
</script>

<style lang='less'>
.u-collectionDialog {
  &_top {
    .list {
      display: flex;
      flex-wrap: wrap;
    }
    .item {
      width: 50%;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      .key {
        width: 80px;
        display: block;
      }
    }
  }
  &-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
  }
}
</style>
